<template>
	<view class="pb-safe-area">
		<!-- 记录列表 -->
		<view class="flex flex-column grid-gap-4 list" v-if="list.length > 0">
			<view class="p-4 list-item border-top" v-for="(item,index) in list" :key="index">
				<x-moments-item :item="item">
					<template #headimg-tags>
						<x-tag type="primary" bg light>{{item.examine_text}}</x-tag>
					</template>
					<template #more>
						<view class="flex-1 p-2 flex flex-center grid-gap-1" @tap="deleteMoments(item, index)">
							<uni-icons type="trash" color="var(--xl-primary)"></uni-icons>
							<text class="h10 text-primary text-nowrap">删除</text>
						</view>
					</template>
				</x-moments-item>
			</view>
			<x-more :status="loading" @load="getList()"></x-more>
		</view>
		<view v-else class="vh-50 flex flex-center">
			<x-empty type="log" text="暂无动态"></x-empty>
		</view>
		<v-loading v-if="pageLoading" />
	</view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { $api, $message } from "@/utils";
const loading = ref('loadmore');
const pageLoading = ref(false);
const search = ref({
	page: 1,
	action: 'technician'
});
const list = ref([]);
const getList = () => {
	if (loading.value === 'loading' || loading.value === 'nomore') return;
	loading.value = 'loading';
	$api.Moments.list(search.value).then((data: any) => {
		list.value = [...list.value, ...data.data];
		search.value.page++;
		if (data.current_page >= data.last_page) {
			nextTick(() => {
				loading.value = 'nomore';
			})
		}
	}).catch(() => {
		nextTick(() => {
			loading.value = 'nomore';
		})
	}).finally(() => {
		if (loading.value === 'loading') {
			loading.value = 'loadmore';
		}
	})
}
const deleteMoments = (item: any, index: number) => {
	uni.showModal({
		title: '提示',
		content: '确定删除该动态吗？',
		success: (res) => {
			if (res.confirm) {
				pageLoading.value = true;
				$api.Moments.delete({ id: item.id }).then((res: any) => {
					$message.success(res.msg);
					list.value.splice(index, 1);
				}).catch((err: any) => {
					$message.error(err.msg);
				}).finally(() => {
					pageLoading.value = false;
				})
			}
		}
	})
}
onLoad(() => {
	getList();
})
onReachBottom(() => {
	getList();
})
</script>
<style lang="scss" scoped>
.list {
	&-item:nth-child(1) {
		border-top: 0;
	}
}
</style>
